<%@page language="java" pageEncoding="utf-8" contentType="text/html; charset=utf-8" import="java.util.*"  %>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ include file="/audi/include/basePage.jsp"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>圈子首页</title>
</head>
<body id="setbgimg1">


<s:include value="/audi/include/header.jsp"></s:include>

<div  class="clear"></div>
<div class="body_contents">
  <div class="body_contents_left" style="padding-top:30px;">
   
   <s:include value="/audi/include/left.jsp"></s:include>
  </div>
  <div class="body_contents_middle">


    <div class="body_contents_middle_title2" >
    <strong>129</strong>&nbsp;万个车友&nbsp;|&nbsp;<strong>12</strong>&nbsp;万个圈子&nbsp;|&nbsp;<strong>934</strong>&nbsp;万个话题
    
    </div>
    <div class="body_contents_middle_title"> <img src="${baseUrl}/images/title_01_qzfl.jpg" /> </div>
    
    <div class="body_contents_middle_listquanzi1">
    
    <%-- <ul>
    <!-- 动态数据 -->
    <li><a href="${baseUrl}/audi/circle_queryChildCircles.action?parentId=1">经销商</a></li><li><a href="${baseUrl}/audi/circle_queryChildCircles.action?parentId=1" class="selected">民间车友会</a></li><li><a href="${baseUrl}/audi/circle_queryChildCircles.action?parentId=1">卓越商圈</a></li><li><a href="${baseUrl}/audi/circle_queryChildCircles.action?parentId=1">奥迪车系</a></li><li><a href="${baseUrl}/audi/circle_queryChildCircles.action?parentId=1">奥迪生活</a></li>    <li><a href="#">＋添加圈子</a></li>
    
    </ul> --%>
 
    <ul>
    <s:iterator value="#request.cirList" var="strs">
    	<li><a href="${baseUrl}/audi/circle_queryChildCircles.action?parentId=<s:property value="#strs.circleId"/>"><s:property value="#strs.circleName"/></a></li>
    	</s:iterator>
    	<li><a href="#">＋添加圈子</a>
    </ul>
    
    </div>
    <div class="body_contents_middle_title"> <img src="${baseUrl}/images/title_01_rmqz.jpg" width="466" height="33" /><a href="#" style="padding-top:5px;"><img src="${baseUrl}/images/btn_ckgd.jpg" /></a> </div>
    
   <div class="body_contents_middle_listquanzi2">
   
   <ul>
   
   <s:iterator value="#request.hotCirList" var="strs">
   <li><a href="#" class="litpic"><img src="${baseUrl}/images/110x110.png" class="quanzi110" style="background-image:url(${baseUrl}/images/126x104.jpg)" /></a><a href="#" class="title"><s:property value="#strs.circleId"/>加圈子</a></li>
   </s:iterator>
   <%-- <li><a href="#" class="litpic"><img src="${baseUrl}/images/110x110.png" class="quanzi110" style="background-image:url(${baseUrl}/images/126x104.jpg)" /></a><a href="#" class="title">加圈子</a></li>
    <li><a href="#" class="litpic"><img src="${baseUrl}/images/110x110.png" class="quanzi110" style="background-image:url(${baseUrl}/images/126x104.jpg)" /></a><a href="#" class="title">加圈子</a></li>
     <li><a href="#" class="litpic"><img src="${baseUrl}/images/110x110.png" class="quanzi110" style="background-image:url(${baseUrl}/images/126x104.jpg)" /></a><a href="#" class="title">加圈子</a></li>
      <li><a href="#" class="litpic"><img src="${baseUrl}/images/110x110.png" class="quanzi110" style="background-image:url(${baseUrl}/images/126x104.jpg)" /></a><a href="#" class="title">加圈子</a></li>
    --%></ul>
   
   </div>
    
    <div class="body_contents_middle_title"> <img src="${baseUrl}/images/title_01_rmqzht.jpg" width="466" height="33" /><a href="#" style="padding-top:5px;"><img src="${baseUrl}/images/btn_ckgd.jpg" /></a> </div>
    
    <div class="body_contents_middle_list">
      <div id="body_contents_middle_list_main" role="body_contents_middle_list_main">
      <ul id="tiles">
      <s:iterator value="#request.topListSimple" var="strs">
  <li> <a href="#" class="litpic"><img src="${baseUrl}/images/hp_img1.jpg" /></a>
    <p class="direction"><s:property value="#strs.topicDesc" /></p>
    <p class="info"><img src="${baseUrl}/images/49x49.jpg" class="infoavata" /><span>夏日阳光<br />
      2012-06-05</span></p>
  </li>
   </s:iterator>
  <li> <a href="#" class="litpic"><img src="${baseUrl}/images/hp_img2.jpg" /></a>
    <p class="direction">这个地方特产冰这个地方魂质感都会从他们的作品...</p>
    <p class="info"><img src="${baseUrl }/images/49x49.jpg" class="infoavata" /><span>夏日阳光<br />
      2012-06-05</span></p>
  </li>
  <li> <a href="#" class="litpic"><img src="${baseUrl}/images/hp_img3.jpg" /></a>
    <p class="direction">这个地方特产冰这个地方魂质感都会从他们的作品...</p>
    <p class="info"><img src="${baseUrl}/images/49x49.jpg" class="infoavata" /><span>夏日阳光<br />
      2012-06-05</span></p>
  </li>
  <li>
    <p class="direction">这个地方特产冰这个地方魂质感都会从他们的作品...</p>
    <p class="info"><img src="${baseUrl}/images/49x49.jpg" class="infoavata" /><span>夏日阳光<br />
      2012-06-05</span></p>
  </li>
  <li> <a href="#" class="litpic"><img src="${baseUrl}/images/hp_img1.jpg" /></a>
    <p class="direction">这个地方特产冰这个地方魂质感都会从他们的作品...</p>
    <p class="info"><img src="${baseUrl }images/49x49.jpg" class="infoavata" /><span>夏日阳光<br />
      2012-06-05</span></p>
  </li>
  <li> <a href="#" class="litpic"><img src="${baseUrl}/images/hp_img2.jpg" /></a>
    <p class="direction">这个地方特产冰这个地方魂质感都会从他们的作品...</p>
    <p class="info"><img src="${baseUrl}/images/49x49.jpg" class="infoavata" /><span>夏日阳光<br />
      2012-06-05</span></p>
  </li>
</ul>

      </div>
      
      
      <div class="body_contents_middle_list_btn">
     <div class="body_contents_middle_list_btn_left"> 热门话题：<a href="#">疾速</a> <a href="#">精准</a> <a href="#">会学习</a> <a href="#">为重新</a> <a href="#">创造</a> <a href="#">输入法</a></div>
      <div class="body_contents_middle_list_btn_right"><a href="#">更多话题...</a></div>
      
      </div>
      <div class="clear"></div>
       <div class="body_contents_middle_title"> <img src="${baseUrl}/images/title_01_rmqz1.jpg" width="466" height="33" /><a href="#" style="padding-top:5px;"><img src="${baseUrl}/images/btn_ckgd.jpg" /></a> </div>
       
       <div class="clear"></div>
       
           
   <div class="body_contents_middle_listquanzi3">
   
   <ul>
   <li><a href="#" class="litpic"><img src="${baseUrl}/images/upload/175x116.jpg" /></a> </li>
    <li><a href="#" class="litpic"><img src="${baseUrl}/images/upload/175x116.jpg" /></a> </li>
     <li><a href="#" class="litpic"><img src="${baseUrl}/images/upload/175x116.jpg" /></a> </li>
  
   </ul>
   
   </div>
       
       
       
       
    </div>
  </div>
  <div class="body_contents_right" style="padding-top:20px">
  
 <s:include value="/audi/include/right.jsp"></s:include>
    
    <div class="body_contents_right_btn"></div>
  </div>
</div>
<div  class="clear"></div>
<s:include value="/audi/include/footer.jsp"></s:include>
<script src="scripts/jquery-1.7.1.min.js"></script> 
<script language="javascript" src="scripts/jquery.idTabs.min.js"></script> 
<script language="javascript" src="scripts/public.js"></script> 
<script src="scripts/jquery.imagesloaded.js"></script> 
<script src="scripts/jquery.wookmark.js"></script> 
<script type="text/javascript">
    $('#tiles').imagesLoaded(function() {
      // Prepare layout options.
      var options = {
        autoResize: true, // This will auto-update the layout when the browser window is resized.
        container: $('#body_contents_middle_list_main'), // Optional, used for some extra CSS styling
        offset: 7, // Optional, the distance between grid items
        itemWidth: 177 // Optional, the width of a grid item
      };
      
      // Get a reference to your grid items.
      var handler = $('#tiles li');
      
      // Call the layout function.
      handler.wookmark(options);
      
      // Capture clicks on grid items.
      handler.click(function(){

      });
	  $(".userinfo_nav").idTabs("!mouseover");
    });
  </script>



</body>
</html>